<template>
    <!-- pages/myincome/storeincome/index.wxml -->
    <view>
        <van-tabs
            :active="active"
            @change="onChange"
            title-active-color="#333333"
            title-inactive-color="#999999"
            nav-class="nav-class"
            custom-class="custom-class"
            :ellipsis="false"
        >
            <van-tab title="收入记录">
                <view class="incomebox">
                    <view class="flexbox-sb mt-20">
                        <view class="centers incometext2" @tap="onShowpopup">
                            <!-- <view class="mr-10" bindtap="onShowpopup">{{nowtime}}</view> -->
                            <picker class="mr-10" mode="date" fields="month" :value="currentDate" :start="minDate" :end="maxDate" @change="onInputTime">
                                <view class="picker">{{ nowtime }}</view>
                            </picker>
                            <view class="sj"></view>
                        </view>
                        <view class="incometext1">总收益：¥{{ monthincome }}</view>
                    </view>
                    <view class="flexbox-sb box2" v-if="recomUserlist.length > 0" v-for="(item, index) in recomUserlist" :key="index">
                        <view style="width: 60%">
                            <view class="box2text1">{{ item.name }}</view>
                            <view class="box2text4 mt-10">间推消费收益</view>
                        </view>

                        <view>
                            <view class="box2text3">+{{ item.income }}</view>
                            <view>
                                <text class="box2text2 mr-10">{{ item.time }}</text>
                                <!-- <text class="box2text2">12:00:03</text> -->
                            </view>
                        </view>
                    </view>
                    <van-empty v-if="recomUserlist.length == 0" description="暂无数据" />
                </view>
            </van-tab>
            <van-tab title="门店列表">
                <view class="userbox">
                    <view class="flexbox-sb mt-20">
                        <view class="incometext2">共{{ UserCountObj.level1number ? UserCountObj.level1number : 0 }}家门店</view>
                        <view class="incometext1">总收益：¥{{ UserCountObj.totalincome ? UserCountObj.totalincome : 0 }}</view>
                    </view>
                    <view class="flexbox-sb box2" v-if="userList.length > 0" @tap="onDetails" :data-item="item" v-for="(item, index) in userList" :key="index">
                        <view>
                            <view class="box2text1">{{ item.name }}</view>
                            <view class="mt-10">
                                <text class="box2text2 mr-10">{{ item.inviteTime }}</text>
                                <!-- <text class="box2text2">12:00:03</text> -->
                            </view>
                        </view>

                        <view>
                            <view class="box2text3">+{{ item.income }}</view>
                        </view>
                    </view>
                    <van-empty v-if="userList.length == 0" description="暂无数据" />
                </view>
            </van-tab>
        </van-tabs>
        <!-- <van-popup show="{{ show }}" round position="bottom" custom-style="height: 346px" bind:close="onClose"
    close-icon="cross" closeable>
    <view class="pbox mt-100">
      <van-datetime-picker type="year-month" value="{{ currentDate }}" min-date="{{ minDate }}" max-date="{{ maxDate }}"
        bind:input="onInputTime" show-toolbar="{{false}}" />
    </view>
    <view class="btn" bindtap="onType">
      确定
    </view>
  </van-popup> -->
    </view>
</template>

<script>
// pages/myincome/storeincome/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
import { getTime } from '../../../utils/util.js';

const moment = require('../../../utils/moment.min');

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            currentDate: moment().format('YYYY-MM-DD'),

            minDate: moment().subtract(3, 'year').format('YYYY-MM-DD'),
            maxDate: moment().format('YYYY-MM-DD'),
            show: false,
            recomUserlist: [],
            page: 1,
            pageNo: 1,
            monthincome: 0,
            gettime: '',

            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                }

                if (type === 'month') {
                    return `${value}月`;
                }

                return value;
            },

            nowtime: '',
            nowtime1: '',
            UserCountObj: null,
            userList: [],
            active: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let time = getTime(new Date().getTime(), 4);
        this.setData({
            nowtime: time
        });
        let gettime = getTime(new Date().getTime(), 5);
        this.setData({
            gettime
        });
        this.postrRecomUser(this.page, gettime, false);
        this.postUserList(this.pageNo, false); //美发师总推荐 2美发师 3门店

        _request
            .get('/recommentIncomeCount/getUserRecommetsByRole', {
                userId: uni.getStorageSync('userid'),
                role: '3'
            })
            .then((res) => {
                this.setData({
                    UserCountObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error);
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.postUserList(1, true);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            pageNo: this.pageNo + 1
        });
        this.postUserList(this.pageNo, true);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 关闭窗口
        // onClose() {
        //   this.setData({
        //     show: false
        //   })
        // },
        // 展示
        // onShowpopup() {
        //   this.setData({
        //     show: true
        //   })
        // },
        // 获取时间
        onInput(event) {
            this.setData({
                currentDate: event.detail
            });
        },

        // 获取时间
        onInputTime(event) {
            // let time = getTime(event.detail, 4)
            // let gettime = getTime(event.detail, 5)
            // this.setData({
            //   currentDate: event.detail,
            //   gettime: gettime,
            //   nowtime1: time
            // });
            let dt = event.detail.value;
            this.setData({
                recomUserlist: [],
                currentDate: dt,
                nowtime: moment(dt).format('YYYY年MM月'),
                gettime: moment(dt).format('YYYYMM'),
                page: 1,
                monthincome: 0
            });
            this.postrRecomUser(this.page, this.gettime, false);
        },

        // 确定
        // onType() {
        //   this.setData({
        //     show: false,
        //     recomUserlist: [],
        //     nowtime: this.data.nowtime1,
        //     page: 1,
        //   })
        //   this.postrRecomUser(this.data.page, this.data.gettime, false)
        // },
        // 查看详情
        onDetails(e) {
            const { inviteUserId } = e.currentTarget.dataset.item;
            uni.navigateTo({
                url: '/pages/myincome/storeincome/details/index?id=' + inviteUserId
            });
        },

        // 获取收益 1门店 2美发师 3用户 4拓客
        postUserList(page, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .postObj('/recomUser/recommendUserList', {
                    userId: uni.getStorageSync('userid'),
                    page,
                    roletype: '1'
                })
                .then((res) => {
                    if (res.data.data.userIncomeInfos.length > 0 && res.data.data.userIncomeInfos != null) {
                        let list = res.data.data.userIncomeInfos.map((item) => {
                            item.inviteTime = getTime(item.inviteTime, 1);
                            return item;
                        });
                        this.setData({
                            userList: page > 1 ? [...this.userList, ...list] : list
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error);
                });
        },

        // 获取收益 1门店 2美发师 3用户 4拓客
        postrRecomUser(page, month, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .postObj('/recomUser/recommendIncomeByMonthCombine', {
                    userId: uni.getStorageSync('userid'),
                    month,
                    page,
                    roletype: '1'
                })
                .then((res) => {
                    if (res.data.data && res.data.data != null) {
                        this.setData({
                            recomUserlist: res.data.data.map((item) => {
                                item.time = getTime(item.time, 1);
                                return item;
                            }),
                            monthincome: res.data.data[0].monthincome
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error);
                });
        },

        onChange() {
            console.log('占位：函数 onChange 未声明');
        },

        onShowpopup() {
            console.log('占位：函数 onShowpopup 未声明');
        }
    }
};
</script>
<style>
/* pages/myincome/storeincome/index.wxss */
/* 收入记录 */
.incomebox {
    padding: 0 40rpx;
}

.sj {
    width: 0px;
    height: 0px;
    border-top: 12rpx solid #333333;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
}

.incometext1 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.incometext2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.box2 {
    height: 144rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.box2text1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    width: 100%;
}

.box2text3 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 50rpx;
    text-align: right;
}

.box2text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

/* 列表 */
.userbox {
    padding: 0 40rpx;
}

.van-tab--active {
    font-size: 32rpx !important;
}

/* 弹窗 */
.pbox {
    height: 360rpx;
}

.btn {
    width: 400rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: 50rpx;
    text-align: center;
}

.van-picker {
    height: 360rpx !important;
}
</style>
